<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root'))

    class App extends React.Component {
        state = {
            userName: 'kasha',
            passWord: '111111',
            city: '5',
            sex: '1',
            hobby: ['1', '2', '4']


        }
        changeHandler(e) {
            if (e.target.type === 'checkbox') {
                const copyState = [...this.state.hobby]
                const index = copyState.findIndex(v=>v===e.target.value)
                if (index === -1) {
                    copyState.push(e.target.value)
                } else {
                    copyState.splice(index, 1)
                }
                this.setState({
                    [e.target.name]: copyState
                })
            } else {
                this.setState({
                    [e.target.name]: e.target.value
                })
            }



        }

        submitHandler(e) {
            e.preventDefault()
            console.log('userName', this.state.userName)
            console.log('passWord', this.state.passWord)
            console.log('city', this.state.city)
            console.log('sex', this.state.sex)
            console.log('hobby', this.state.hobby)
        }


        render() {
            return (
                <div>
                    <form onSubmit={this.submitHandler.bind(this)}>
                        <p>用户名：<input name='userName' onChange={this.changeHandler.bind(this)} value={this.state.userName} type="text" /></p>
                        <p>密  码：<input name='passWord' onChange={this.changeHandler.bind(this)} value={this.state.passWord} type="password" /></p>
                        <p>
                            所在城市：
                            <select name='city' value={this.state.city} onChange={this.changeHandler.bind(this)}>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">武汉</option>
                                <option value="4">西安</option>
                                <option value="5">深圳</option>
                                <option value="6">南白滩</option>
                            </select>
                        </p>
                        <p>
                            性别：
                            <input type="radio" name='sex' onChange={this.changeHandler.bind(this)} value={1} checked={this.state.sex === '1'} />男
                            <input type="radio" name='sex' onChange={this.changeHandler.bind(this)} value={2} checked={this.state.sex === '2'} />女
                        </p>

                        <p>
                            爱好：
                            <input onChange={this.changeHandler.bind(this)} type="checkbox" name={"hobby"} checked={this.state.hobby.includes('1')} value={1} />学习
                            <input onChange={this.changeHandler.bind(this)} type="checkbox" name={"hobby"} checked={this.state.hobby.includes('2')} value={2} />电影
                            <input onChange={this.changeHandler.bind(this)} type="checkbox" name={"hobby"} checked={this.state.hobby.includes('3')} value={3} />游戏
                            <input onChange={this.changeHandler.bind(this)} type="checkbox" name={"hobby"} checked={this.state.hobby.includes('4')} value={4} />视频
                        </p>


                        <button> 提交按钮 </button>
                    </form>
                </div>
            );
        }
    }


    root.render(<App />)

</script>

</html>